<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
  <title>绘本音频播放器--by YH</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/theme-github.css" />
 
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.css">
  <script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/aplayer@1.10.0/dist/APlayer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/color-thief-don@2.0.2/src/color-thief.js"></script>

  
  
<link rel="stylesheet" href="css/swiper.min.css">
<link rel="stylesheet" href="css/shipping.css">
<link rel="stylesheet" type="text/css" href="font/iconfont.css">

<script src="js/swiper.min.js"></script> 

  <style>
    body {
      text-rendering: auto;
    }
    #evanyou-canvas {
      z-index: -1 !important;
    }
    .aplayer-wrap {
      max-width: 700px;
      margin: 20px 0;
    }
    .sidebar-toggle {
      z-index: 90;
    }
  </style>
</head>
<body>
  <!-- don't remove this part start -->
  <div id="shipping">
      <div class="swiper-container" id="rotate-swiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide rotate-slide">
            <div class="block">
              <div class="header">
                <h3>绘本-A Hat</h3>
                <div class="top-info clearfix">
                  <div class="txt"></div>
                </div>
              </div>
              <div class="body"><div class="swiper-container"><div class="swiper-wrapper">
                <div class="aplayer-wrap">
                  <div id="aplayer1"></div>
              </div>
              <div class="swiper-slide">
                
              </div></div></div></div>
            </div>
          </div>
          <div class="swiper-slide rotate-slide">
            <div class="block">
              <div class="header">
                <h3>绘本-Go Cat</h3>
                <div class="top-info clearfix">
                  <div class="txt"></div>
                 
                </div>
              </div>
              <div class="body"><div class="swiper-container"><div class="swiper-wrapper">
                  <div class="aplayer-wrap">
                      <div id="aplayer2"></div>
                  </div>
                <div class="swiper-slide"></div></div></div></div>
              
            </div>
          </div>
          <div class="swiper-slide rotate-slide">
            <div class="block">
              <div class="header">
                <h3>绘本 Pat the Cat</h3>
                <div class="top-info clearfix">
                  <div class="txt"></div>
               
                </div>
              </div>
              <div class="body"><div class="swiper-container"><div class="swiper-wrapper">
                  <div class="aplayer-wrap">
                      <div id="aplayer3"></div>
                  </div>
                <div class="swiper-slide"></div></div></div></div>
           
            </div>
          </div>
     
        </div>
        <div class="swiper-pagination" id="rotate-pagination"></div>
      </div> 
    </div>
    
  
  <div id="app"></div>
  <script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/plugins/docsearch.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/docute-evanyou/dist/evanyou.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/docute@3.4.12/dist/docute.js"></script>
  <script src="./config.js"></script>


  <!-- livereload script placeholder -->
  <!-- don't remove this part end -->


  <script>
      var swiper = new Swiper('#rotate-swiper', {
        pagination: {
          el: '#rotate-pagination',
        },
        runCallbacksOnInit: true,
        watchSlidesProgress: true,
        on: {
          progress: function() {
            for (var i = 1; i < this.slides.length; i++) {
              if (this.slides[i].progress <= 0) {
                this.slides.eq(i).find(".block").transition(0)
                this.slides.eq(i).find(".block").transform("rotateZ(" + 13 * Math.abs(this.slides[i].progress) + "deg) translate3d(0, 0, 0)")
              }
            }
          },
          setTransition: function(transition) {
            for (var i = 1; i < this.slides.length; i++) {
              if (this.slides[i].progress <= 0) {
                this.slides.eq(i).find(".block").transition(transition)
                rot = 13 * Math.abs(this.slides[i].progress);
                this.slides.eq(i).find(".block").transform("rotateZ(" + rot + "deg) translate3d(0, 0, 0)")
              }
            }
          },
          init: function() {
            this.emit('transitionEnd');
          },
          transitionEnd: function() {
            if (this.slides[this.activeIndex].contentLoaded == undefined) {
              this.slides.eq(this.activeIndex).find('.swiper-slide').html('');
              new Swiper(this.slides.eq(this.activeIndex).find('.swiper-container'), {
                direction: 'vertical',
                slidesPerView: 'auto',
                freeMode: true,
              });
              this.slides[this.activeIndex].contentLoaded = true;
            }
  
          },
        },
      });
  
      
  </script>
  <script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?8ba36db59630a557120f96e66f8f3a8d";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
